<template>
  <a-tag
    :color="state?.color || '#909399'"
    :style="tagStyle"
    class="state-tag"
  >
    <template v-if="state.icon" #icon>
      <Icon :name="state.icon" :size="14" class="state-icon" />
    </template>
    {{ state.name }}
  </a-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { StateResponse } from '@/types/state'
import Icon from '@/components/ui/Icon.vue'

interface Props {
  state: StateResponse
  variant?: 'default' | 'outlined' | 'filled'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'default'
})

const tagStyle = computed(() => {
  const baseStyle = {
    borderRadius: '6px',
    fontWeight: '500',
    fontSize: '12px',
    padding: '4px 10px',
    display: 'inline-flex',
    alignItems: 'center',
    gap: '6px',
    lineHeight: '1.2',
    minHeight: '24px'
  }

  // 提供默认颜色，防止color为null或undefined
  const stateColor = props.state?.color || '#909399'

  switch (props.variant) {
    case 'outlined':
      return {
        ...baseStyle,
        backgroundColor: 'transparent',
        color: stateColor,
        border: `1px solid ${stateColor}`
      }
    case 'filled':
      return {
        ...baseStyle,
        backgroundColor: stateColor,
        color: '#fff',
        border: 'none'
      }
    default:
      return {
        ...baseStyle,
        backgroundColor: `${stateColor}20`,
        color: stateColor,
        border: `1px solid ${stateColor}50`
      }
  }
})
</script>

<style scoped>
.state-tag {
  user-select: none;
  transition: all 0.2s ease;
  cursor: default;
}

.state-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.state-icon {
  flex-shrink: 0;
  opacity: 0.9;
}

/* 禁用状态的样式 */
.state-tag.disabled {
  opacity: 0.6;
  filter: grayscale(0.3);
}

/* 隐藏状态的样式 */
.state-tag.hidden {
  opacity: 0.4;
  border-style: dashed;
}
</style>